<template>

<div class="bakcjipppfg">
  <div class="boxSearfg">
      <div class="haredSearch">
        <div>
             <span class="pele">
                 <span class="iconfont icon-zuoyou1" @click="$router.push('/recommend')"></span>
             </span>
             <input type="text" v-model="keyword" @keydown.enter="gettokey(keyword)" @focus="getTosug">
             <span class="plke">
               <span class="iconfont icon-x" @click="delall"></span>
             </span>
        </div>
      </div>
      <div class="Searchmian" >
          <div class="tosearch" v-show="hint==false" v-if="topkeydata.data">
               <div class="re">
                    <h3>热门搜索</h3>
                    <div class="kkkk">
                         <div class="tedf" v-for="(item,index) in topkeydata.data" :key="index" v-show="index<=6" >
                           <span @click="dianjis(item.searchWord)">
                                {{index+1}} {{item.searchWord}}
                           </span>
                         </div>
                    </div>
               </div>
          </div>
          <div class="historylist" v-show="hoty==true">
              <h3><span>搜索历史</span><i class="iconfont icon-icon2" @click="delhistoryall"></i></h3>
              <ul class="hou">
                <li v-for="(item,index) in historylist" :key="index" >
                  <span @click="dianjisou(item.name)"><i class="iconfont icon-fangdajing"></i> {{item.name}}</span>
                  <i class="iconfont icon-x" @click="delhistory(index)"></i>
                </li>
              </ul>
          </div>
          <div class="Searchlist" v-show="xian==false">
               <h3>最佳匹配</h3>
              <ul class="jkpp"  v-if="selist.result">
                <li v-for="(item,index) in selist.result.songs" :key="index">
                    <div class="pq">
                        <span>{{index+1}}</span>
                    </div>
                    <div class="wq">
                      <span>{{item.name}}</span>
                      <p v-for="(le,i) in item.ar" :key="le.id" @click="geou(le)" v-show="i<1">{{le.name}}</p>
                    </div>
                    <div class="hj">
                      <span class="iconfont icon-diandiandian"></span>
                    </div>
                </li>
              </ul>
          </div>
      </div>
      <!-- 推荐 -->
      <div class="tohint" v-show="hints==true" >
          <ul class="pop" v-if="tiuse.result">
            <li v-for="(item,index) in tiuse.result.songs" :key="index" @click="dianjisou(item.name) ">
              <span><i class="iconfont icon-fangdajing"></i> {{item.name}}</span>
            </li>
          </ul>
      </div>
  </div>
</div>
 
</template>

<script>
import {getSearch,getTopSearch,getSuggest} from "../../api/search"
// import {getTopSearch,getSuggest,getMultiplicity} from "../../api/search"
export default {
   data(){
     return{
        keyword:null,
        topkeydata:{},
        xian:true,
        selist:{
          result:{}
        },
        tiuse:{
          result:{
          },
        },
        hint:false,
        hoty:false,
        hints:false,
        historylist:[
            {
              name:"薛之谦"
            },
            {
              name:"Charlie Puth"
            }
        ],
     }
   },
   methods:{
       //推荐
       gettokey(key){

        //  console.log(this.keyword)
          let  tkeywords = key
          getSearch({
            type:1,
            keywords:tkeywords 
          }).then(data=>{
            console.log(data)
            this.selist=data;
          })
          this.xian=false;
           this.hint=true//热门
          this.hoty=false;//历史
          this.hints=false
          this.historylist.push({name:this.keyword})
       },
       //热门搜索
       getTopkey(){
          getTopSearch().then(data=>{
            // console.log(data);
            this.topkeydata=data;
          })
       },
       //搜索推荐
       getTosug(){
          getSuggest({
             keywords:this.keyword
          }).then(data=>{
             console.log(data);
             this.tiuse=data;
            //  console.log(this.tiuse.result.songs)
          })
       },
       //删除历史记录
       delhistory(index){
         this.historylist.splice(index,1);
       },
       //删除全部历史记录
       delhistoryall(){
          this.historylist.forEach(ele => {
            this.historylist.splice(ele,);
          });
       },
       //点击播放
       geou(le){
        // 
        console.log(le)
         let iinswid= le.id
          console.log(le)
          console.log(iinswid)
          this.$emit("get-player-id",iinswid)
          // this.$emit("get-play-all-id",this.$route.query.id);//传递di
       },
       //搜索最佳匹配
       dianjisou(name){
         console.log(name)
        //  this.hint=false;
         this.xian=false;
         this.hoty=false
         this.keyword = name
         this.gettokey(name)

       },
       //
       dianjis(searchWord){
          this.xian=false;
          this.keyword = searchWord;
          this.gettokey(searchWord)
       },
       delall(){
         this.keyword=""
       }
   },
   created(){
      this.getTopkey();
   },
   watch:{
       keyword(){
          if(this.keyword.length==" "){
             this.xian=true;
             this.hoty=true;
             this.hint=false;
             this.hints=false;
             console.log(this.keyword)
          }else{
              this.hint=true;
              this.xian=true;
              this.hints=true
               this.getTosug()
              this.hoty=false
          } 
       },
     
   }
}
</script>

<style lang="less">
.bakcjipppfg{
  width: 100%;
  height: 100%;
}
.boxSearfg{
    left: 0;
    top: 0;
    position:fixed;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background-color: #f2f3f4;

  .haredSearch{
       display: flex;
       justify-content: flex-start;
       width: 100%;
       height: 50px;
       background: #c3c4c2;
      div{
          position: fixed;
          left: 0;
          top: 0;
          justify-content: flex-start;
          width: 100%;
          height: 50px;
          background: #c3c4c2;
          padding-bottom:0px;
          z-index: 10;
          display: flex;
          .pele{
            width: 10%;
            height: 100%;
            display: block;
              // padding-left: 10px;
              // text-align: left;
              text-align: center;
              line-height: 50px;
              .iconfont{
                width: 10%;
                height: 30px;
                text-align: center;
                line-height: 28px;
                font-size: 18px;
                color: #f9eeee;
             }
          }
          .plke{
            width: 10%;
            height: 100%;
            display: block;
            text-align: center;
             line-height: 50px;
            span{
              &.iconfont{
                font-size: 22px;
                color: white;
              }
            }
          }
        
            input{
              margin-top: 10px;
              width: 80%;
              height: 30px;
              outline:none;
              color: #f2f3f4;
              border:0;
              border-bottom:1px solid #f9eeee;
              background:#c3c4c2;
            
            }
      }
        
  }
  .Searchmian{
      width: 100%;
      // padding: 20px;
      padding: 7px;
      background-color: #f2f3f4;
      box-sizing: border-box;
      //热门搜索
      .tosearch{
         width: 100%;
        //  height: 80px;
        //  line-height: 25px;
         .re{
          //  padding: ;
            width: 100%;
            h3{
            height: 25px;
            font-weight: bold;
            font-size: 12px;
            color: #b1b2b2;
            }
            .kkkk{
              // margin-top: 20px;
              width: 96%;
              // height: 200px;
              margin: auto;
              padding: 10px;
              box-sizing: border-box;
              border-radius: 10px;
              background-color: #fff;
              display: flex;
              flex-wrap: wrap;
              .tedf{
                width: 50%;
                height: 25px;
                // background-color: tomato;
                margin-top: 5px;
                
                span{
                  font-size: 18px;
                  padding: 2px;
                  color:#000;
                  border-radius: 5px ;
                }
              }
            }
            
         }
         
      }
     

  }
  ///搜索历史
  .historylist{

     width: 100%;
   
     // margin-top: 10px;
      border-radius: 10px;
       box-sizing: border-box;
        width: 96%;
        margin: auto;
        margin-top: 10px;
      h3{
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
          background-color: rgb(238, 237, 237);
        //  background-color: #fff;
         padding-left: 10px;
         padding-right: 10px;
         box-sizing: border-box;
         width: 100%;
         height: 30px;
         line-height: 30px;
         font-weight: bold;
         font-size: 12px;
         color: #b1b2b2;
         display: flex;
         justify-content: space-between;
         span{
            font-size: 12px;
           color: #b1b2b2;
         }
         i{
           font-style: normal;
         }
      }
      ul.hou{
        //搜索历史
        // background-color: #fff;
        padding-bottom: 2px;
        position: relative;
       li{
         margin-top: 1px;
         background-color: rgb(238, 237, 237);
         padding-left: 10px;
         padding-right: 10px;
         box-sizing: border-box;
          //  width: 100%;
           height: 30px;
           display: flex;
           font-size: 14px;
           line-height: 30px;
           color:#535555;
          //  margin:10px;
           justify-content: space-between;
           i{
             font-style: normal;
           }
        }
         li:nth-last-child(1){
           border-bottom-left-radius: 10px;
           border-bottom-right-radius: 10px;
         }
        
      }
  }

  //最佳匹配
  .Searchlist{
     width: 100%;
     margin-top: 10px;
     box-sizing: border-box;
      h3{
          height: 25px;
          font-weight: bold;
          font-size: 12px;
          color: #e0857e;
        }
      ul.jkpp{
        width: 100%;
        position: relative;
       li{
          //  width: 100%;
           height: 50px;
           font-size: 18px;
           li:nth-child(1){
              border-top-left-radius: 10px;
               border-top-right-radius: 10px;
           }
            li:nth-last-child(1){
           border-bottom-left-radius: 10px;
           border-bottom-right-radius: 10px;
         }
           color:#535555;
          //  margin-bottom:10px;
          //  background-color: #fff;
           margin-top: 1px;
           display: flex;
           .pq{
             width: 15%;
             height: 100%;
             text-align: center;
             line-height: 50px;
             span{
               font-size: 18px;
             }
           }
           .wq{
              line-height: 30px;
              width: 75%;
              height: 100%;
              padding-top: 2px;
              padding-bottom: 2px;
              box-sizing: border-box;
              overflow: hidden;
                span{
                  height: 25px;
                  display: block;
                  width: 100%;
                  overflow: hidden;
                }
                p{
                  height: 16px;
                  font-size: 12px;
                }
           }
           .hj{
             width: 10%;
             height: 100%;
             text-align: center;
             line-height: 50px;
             span{
               font-size: 18px;
             }
           }
         
          
        }
      }
  }
  
  //
  .tohint{
      width:100% ;
      padding: 10px;
      box-sizing: border-box;
      ul.pop{
        width: 100%;
        position: relative;
       li{
          //  width: 100%;
           height: 30px;
           font-size: 18px;
           line-height: 25px;
           color:#535555;
          //  background-color: #fff;
           margin-top: 1px;
           span{
             height: 25px;
             display: block;
             width: 100%;
             overflow: hidden;
           }
        }
      }
  }

}
</style>